<!--网站导航.搜索条1-->
<div class="container">
    <script src="/js/DatePicker/WdatePicker.js" type="text/javascript"></script>
    <form class="form-inline" action="<?php echo WEB_DOMAIN; ?>/app/report" method="POST">  
        <label for="inputSuccess" class="control-label"><h4>选择应用：</h4></label>
        <div>
            <?php
            if (is_array($appData)) {
                foreach ($appData as $vl) {
                    $strname.="'".$vl["name"]."'";
                    ?>
                    <label for="inputSuccess" class="control-label"><?php echo $vl["name"] ?><input type="checkbox" value="" /></label>
                <?php }
            }
            ?>
        </div>
        <div class="pagination" style=" text-align: right; width: 600px;"><ul><?php echo $page; ?></ul></div>
    </label><label for="inputSuccess" class="control-label">选择日期：
    <input class="Wdate input-medium" id="stim" name="seach[stim]" type="text" placeholder="开始日期" value="<?php echo $seach["stim"]; ?>" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
    <input class="Wdate input-medium" id="etim" name="seach[etim]" type="text" placeholder="结束日期" value="<?php echo $seach["etim"]; ?>" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
    <button class="btn" type="submit">查询</button></label>
</form>
</div>
<div class="bs-docs-example">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#home">总收入/元<br>￥10000</a></li>
        <li class=""><a data-toggle="tab" href="#profile">总请求数/次<br>0</a></li>
        <li class=""><a data-toggle="tab" href="#shownumber">总展示数/次<br>0</a></li>
        <li class=""><a data-toggle="tab" href="#clicknumber">总点击数/次<br>0</a></li>
        <li class=""><a data-toggle="tab" href="#resultnumber">总效果数/次<br>0</a></li>
        <li class=""><a data-toggle="tab" href="#showincome">展示收入/元<br>￥0</a></li>
        <li class=""><a data-toggle="tab" href="#clickincome">点击收入/元<br>￥0</a></li>
        <li class=""><a data-toggle="tab" href="#resultincome">效果收入/元<br>￥0</a></li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div id="home" class="tab-pane fade active in">
            <p><div id="incomemomeny" style="min-width: 400px; height: 400px; margin: 0 auto"></div></p>
        </div>
        <div id="profile" class="tab-pane fade">
            <p>总请求数</p>
            <p><div id="requestnumber" style="min-width: 1000px; height: 400px; margin: 0 auto"></div></p>
        </div>
        <div id="shownumber" class="tab-pane fade">
            <p>shownumber</p>
        </div>
        <div id="clicknumber" class="tab-pane fade">
            <p>总点击数</p>
        </div>
        <div id="resultnumber" class="tab-pane fade">
            <p>总效果数</p>
        </div>
        <div id="resultnumber" class="tab-pane fade">
            <p>展示收入</p>
        </div>
        <div id="showincome" class="tab-pane fade">
            <p>点击收入</p>
        </div>
        <div id="clickincome" class="tab-pane fade">
            <p>效果收入</p>
        </div>
        <div id="resultincome" class="tab-pane fade">
            <p>4</p>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'incomemomeny',
                    type: 'bar'
                },
                title: {
                    text: '应用总收入趋势图'
                },
                subtitle: {
                    text: '来源: binggu.com'
                },
                xAxis: {
                    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Population (元)',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+
                            this.series.name +': '+ this.y +' 元';
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -100,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{
                        name: 'Year 1800',
                        data: [107, 31, 635, 203, 2]
                    }, {
                        name: 'Year 1900',
                        data: [133, 156, 947, 408, 6]
                    }, {
                        name: 'Year 2008',
                        data: [973, 914, 4054, 732, 34]
                    }]
            });
        });
    
    });
</script>
<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'requestnumber',
                    type: 'spline'
                },
                title: {
                    text: 'Snow depth in the Vikjafjellet mountain, Norway'
                },
                subtitle: {
                    text: 'An example of irregular time data in Highcharts JS'
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: { // don't display the dummy year
                        month: '%e. %b',
                        year: '%b'
                    }
                },
                yAxis: {
                    title: {
                        text: 'Snow depth (m)'
                    },
                    min: 0
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                            Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
                    }
                },
            
                series: [{
                        name: 'Winter 2007-2008',
                        data: [
                            [Date.UTC(1970,  9, 27), 0   ],
                            [Date.UTC(1970, 10, 10), 0.6 ],
                            [Date.UTC(1970, 10, 18), 0.7 ],
                            [Date.UTC(1970, 11,  2), 0.8 ],
                            [Date.UTC(1970, 11,  9), 0.6 ],
                            [Date.UTC(1970, 11, 16), 0.6 ],
                            [Date.UTC(1970, 11, 28), 0.67],
                            [Date.UTC(1971,  0,  1), 0.81],
                            [Date.UTC(1971,  0,  8), 0.78],
                            [Date.UTC(1971,  0, 12), 0.98],
                            [Date.UTC(1971,  0, 27), 1.84],
                            [Date.UTC(1971,  1, 10), 1.80],
                            [Date.UTC(1971,  1, 18), 1.80],
                            [Date.UTC(1971,  1, 24), 1.92],
                            [Date.UTC(1971,  2,  4), 2.49],
                            [Date.UTC(1971,  2, 11), 2.79],
                            [Date.UTC(1971,  2, 15), 2.73],
                            [Date.UTC(1971,  2, 25), 2.61],
                            [Date.UTC(1971,  3,  2), 2.76],
                            [Date.UTC(1971,  3,  6), 2.82],
                            [Date.UTC(1971,  3, 13), 2.8 ],
                            [Date.UTC(1971,  4,  3), 2.1 ],
                            [Date.UTC(1971,  4, 26), 1.1 ],
                            [Date.UTC(1971,  5,  9), 0.25],
                            [Date.UTC(1971,  5, 12), 0   ]
                        ]
                    }, {
                        name: 'Winter 2008-2009',
                        data: [
                            [Date.UTC(1970,  9, 18), 0   ],
                            [Date.UTC(1970,  9, 26), 0.2 ],
                            [Date.UTC(1970, 11,  1), 0.47],
                            [Date.UTC(1970, 11, 11), 0.55],
                            [Date.UTC(1970, 11, 25), 1.38],
                            [Date.UTC(1971,  0,  8), 1.38],
                            [Date.UTC(1971,  0, 15), 1.38],
                            [Date.UTC(1971,  1,  1), 1.38],
                            [Date.UTC(1971,  1,  8), 1.48],
                            [Date.UTC(1971,  1, 21), 1.5 ],
                            [Date.UTC(1971,  2, 12), 1.89],
                            [Date.UTC(1971,  2, 25), 2.0 ],
                            [Date.UTC(1971,  3,  4), 1.94],
                            [Date.UTC(1971,  3,  9), 1.91],
                            [Date.UTC(1971,  3, 13), 1.75],
                            [Date.UTC(1971,  3, 19), 1.6 ],
                            [Date.UTC(1971,  4, 25), 0.6 ],
                            [Date.UTC(1971,  4, 31), 0.35],
                            [Date.UTC(1971,  5,  7), 0   ]
                        ]
                    }, {
                        name: 'Winter 2009-2010',
                        data: [
                            [Date.UTC(1970,  9,  9), 0   ],
                            [Date.UTC(1970,  9, 14), 0.15],
                            [Date.UTC(1970, 10, 28), 0.35],
                            [Date.UTC(1970, 11, 12), 0.46],
                            [Date.UTC(1971,  0,  1), 0.59],
                            [Date.UTC(1971,  0, 24), 0.58],
                            [Date.UTC(1971,  1,  1), 0.62],
                            [Date.UTC(1971,  1,  7), 0.65],
                            [Date.UTC(1971,  1, 23), 0.77],
                            [Date.UTC(1971,  2,  8), 0.77],
                            [Date.UTC(1971,  2, 14), 0.79],
                            [Date.UTC(1971,  2, 24), 0.86],
                            [Date.UTC(1971,  3,  4), 0.8 ],
                            [Date.UTC(1971,  3, 18), 0.94],
                            [Date.UTC(1971,  3, 24), 0.9 ],
                            [Date.UTC(1971,  4, 16), 0.39],
                            [Date.UTC(1971,  4, 21), 0   ]
                        ]
                    }]
            });
        });
    
    });
</script>
<script src="<?php echo JS_HOST; ?>/js/charts/highcharts.js"></script>
<script src="<?php echo JS_HOST; ?>/js/charts/modules/exporting.js"></script>
<script src="<?php echo JS_HOST; ?>/js/bootstrap-tab.js"></script>
<p><h5>详细信息表</h5><hr><p>
<table class="table table-bordered table-striped">
    <colgroup>
        <col class="span1">
        <col class="span7">
    </colgroup>
    <thead>
        <tr>
            <th>应用名称</th>
            <th>日期</th>
            <th>收入</th>
            <th>请求数</th>
            <th>展示数</th>
            <th>点击数</th>
            <th>效果数</th>
            <th>填充率</th>
            <th>点击率</th>
            <th>展示收入</th>
            <th>点击收入</th>
            <th>效果收入</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>